<script lang="ts" setup>
import VueQrcode from 'vue-qrcode'

const visible = defineModel<boolean>('visible', { required: true })
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    :width="640"
    :footer="false"
    :mask-closable="false"
  >
    <a-steps
      direction="vertical"
      class="w-full"
    >
      <a-step>
        扫描二维码，下载并安装谷歌身份验证器"Google Authenticator"
        <template #description>
          <a-space
            :size="16"
            class="mb-6 mt-4"
          >
            <div class="flex flex-col items-center gap-y-2">
              <vue-qrcode
                value="https://apps.apple.com/us/app/google-authenticator/id388497605"
                :width="96"
                type="image/png"
                :color="{ dark: '#000f', light: '#fff' }"
                clas="rounded-lg"
              />
              <span class="text-3 text-xs leading-5">iOS 版本下载</span>
            </div>
            <div class="flex flex-col items-center gap-y-2">
              <vue-qrcode
                value="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=zh"
                :width="96"
                type="image/png"
                :color="{ dark: '#000f', light: '#fff' }"
                clas="rounded-lg"
              />
              <span class="text-3 text-xs leading-5">Android 版本下载</span>
            </div>
          </a-space>
        </template>
      </a-step>
      <a-step>管理员分配账号时，会同步提供到16位谷歌二次验证码密钥；</a-step>
      <a-step>
        <span class="whitespace-break-spaces">
          打开谷歌验证器App，点击“添加新账户”或“+”号，输入密钥，添加完成后，即会显示6位数字谷歌验证码；
        </span>
      </a-step>
    </a-steps>
  </resource-dialog>
</template>

<style lang="less" scoped>
:deep(.arco-steps-item-process),
:deep(.arco-steps-item) {
  .arco-steps-item-tail {
    left: 9.5px !important;
    border-style: dashed !important;
    top: 20px !important;
    width: 0;
    border-width: 1px;
    border-color: rgb(var(--primary-2));
  }
  .arco-steps-item-node {
    margin-right: 8px;
  }
  .arco-steps-icon {
    @apply bg-white border-primary-6 text-primary-6 size-5 leading-5 text-xs;
  }
  .arco-steps-item-title {
    font-size: 12px;
    line-height: 20px;
    color: var(--color-text-1);
  }
}
:deep(.arco-steps-item) {
  &:not(:last-child) {
    min-height: 48px;
  }
  &:last-child .arco-steps-item-tail {
    display: none;
  }
}
</style>
